<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }
  </style>
</head>

<body>
  <div id="box">box </div>
  <div id='box1'>box1</div>

  <button> 卸载监听</button>
</body>

<script>
  var box = document.querySelector('#box');
  //属性绑定 无法为同一个元素 绑定同一个事件
  box.onclick = function () {
    console.log('hello');
  };
  box.onclick = function () {
    this.style.color = 'red';
  }
  console.dir(box)
  //移除绑定事件
  // box.onclick=null;


  //addEventListener  事件监听

  //1  他可以为同一个元素 绑定多个相同事件
  //要绑定的元素.addEventListener(type,function)
  var box1 = document.getElementById('box1');
  box1.addEventListener('click', function () {
    console.log('第一次点击');
  });
  box1.addEventListener('click', function () {
    console.log('第二次点击');
  });

  function say() {
    alert('say hi');
  }
  box1.addEventListener('click', say)


  var button = document.querySelectorAll('button');
  button[0].onclick = function () {
    //首先一一对应 
    //事件监听的卸载 必须使用函数调用的方式;
    box1.removeEventListener('click', )
  }
</script>

</html>